﻿$(document).ready(function () {

    var jData = {};
    $.ajax({
        type: "POST",
        url: "ProductService.svc/latestProducts",
        data: JSON.stringify(jData),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (json) {

            var data = JSON.parse(json.d);

            for (start = 0; start < data.binding.length; start++) {
                var jsonProduct = "{Product:'" + data.binding[start].ProductID + "',Brand:'" + data.binding[start].Brand + "',Model:'" + data.binding[start].Model + "',Price:'" + data.binding[start].Price + "'}"
                var imgPath = '<img width="125px" height="115px" src="' + data.binding[start].Filepath + '"  />'
                var link = '<a href="#" onclick=window.open("moreDetails.aspx?proid=' + data.binding[start].ProductID + '")>More Details</a>';
                var addToCart = '<input class="btn btn-primary" type="submit" value="Add To Cart" onclick="return addOrderItem(' + jsonProduct + ')" />';

                var brk = '<br>';
                //return "<div> " + imgPath + " Brand Name : " + Details[0] + "  Model : " + Details[1] + " Price : " + Details[2] + "" + link + " </div>";

                var newitem = '<div class="item"> <div class="product-image" > ' + imgPath + ' </div> <div class="product-name" > Product ID : '
                             + data.binding[start].ProductID + brk + ' </div> <div class="shortDescription"> Brand Name : '
                             + data.binding[start].Brand + brk + ' </div> <div class="price-box"> Model : '
                             + data.binding[start].Model + brk + ' </div> <div class="actions"> Price : <span class="price"><span class="symbol">$</span>'
                             + data.binding[start].Price + brk + ' </span> </div>  <div class="gridLink">' + addToCart + ' <div class="moreDetails">' + link + '<div> <div>   </div>';

                $("#Div2").append(newitem);


            }
        },
        failure: function (msg) {
            alert(msg);
        },
        error: function (jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }
    });


    return false;
});